<template>
  <div class="com_contalner">
    <el-card class="box-card" shadow="never">
      <div class="card-header">
        <div class="left">
          <el-icon><Search /> </el-icon>
          <p>筛选搜索</p>
        </div>
        <div class="rigth">
          <el-button>重置</el-button>
          <el-button type="primary"> 查询搜索 </el-button>
        </div>
      </div>
      <div>
        <el-form
          :model="form"
          :inline="true"
          style="margin-top: 15px"
          label-width="140px"
        >
          <el-form-item label="输入搜索：">
            <el-input
              v-model="form.search"
              placeholder="订单编号"
              style="width: 203px"
            />
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input
              v-model="form.name"
              placeholder="收货人姓名/手机号码"
              style="width: 203px"
            />
          </el-form-item>

          <el-form-item label="提交时间">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="请选择时间"
              style="width: 203px"
            />
          </el-form-item>
          <el-form-item label="订单状态:">
            <el-select
              v-model="form.state"
              placeholder="全部"
              style="width: 203px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单分类：">
            <el-select
              v-model="form.classify"
              placeholder="全部"
              style="width: 203px"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源：">
            <el-select
              v-model="form.source"
              placeholder="全部"
              style="width: 203px"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" shadow="never" style="margin-top: 20px">
      <div class="left">
        <el-icon><Tickets /></el-icon>
        <p>数据列表</p>
      </div>
    </el-card>
    <div class="tab">
      <el-table :border="true" data="" style="width: 100%">
        <el-table-column type="selection" width="55" />
      
        <el-table-column prop="" label="编号" width="80" />
        <el-table-column prop="" label="订单" />
        <el-table-column label="提交时间" width="170">
          <template #default="scoped"> </template>
        </el-table-column>
        <el-table-column prop="nickName" label="用户账号" width="170" />
        <el-table-column prop="" label="订单金额" width="120" />
        <el-table-column prop="" label="支付方式" width="120" />
        <el-table-column prop="" label="订单来源" width="120" />
        <el-table-column prop="" label="订单状态" width="170" />
        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scoped">
            <el-button type="primary" link>分配角色</el-button>
            <el-button type="primary" link>编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="left">
        <el-select
          v-model="form.source"
          placeholder="批量操作"
          style="width: 203px"
        >
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" style="margin-left: 10px"> 确定</el-button>
      </div>
      <div class="right">
        <!-- 分页器 -->
        <el-pagination
          v-model:currentPage="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[1, 5, 10, 20]"
          layout="total,sizes, prev, pager, next,jumper"
          :total="pagination.total"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Search, Tickets } from "@element-plus/icons-vue";

const form = reactive({
  search: "",
  name: "",
  date1: "",
  state: "",
  classify: "",
  source: "",
});
const pagination = reactive({
  pageNum: 0,
  pageSize: 10,
  total: 0,
});

const options = [
  {
    value: "Option2",
    label: "待付款",
  },
  {
    value: "Option3",
    label: "待发货",
  },
  {
    value: "Option4",
    label: "已发货",
  },
  {
    value: "Option5",
    label: "已完成",
  },
  {
    value: "Option5",
    label: "已关闭",
  },
];
const options2 = [
  {
    value: "Option2",
    label: "正常订单",
  },
  {
    value: "Option3",
    label: "秒杀订单",
  },
];

const options3 = [
  {
    value: "Option2",
    label: "PC订单",
  },
  {
    value: "Option3",
    label: "APP订单",
  },
];

const options4 = [
  {
    value: "Option2",
    label: "批量发货",
  },
  {
    value: "Option3",
    label: "关闭订单",
  },
  {
    value: "Option3",
    label: "删除订单",
  },
];


</script>

<style lang="scss" scoped>
.com_contalner {
  padding: 10px 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
}
.left {
  display: flex;
  align-items: center;
  p {
    margin-left: 8px;
  }
}
.tab {
  margin: 20px 0;
}
.bottom{
  display: flex;
  justify-content: space-between;
}
</style>
